<script setup lang="ts">
    import { reactive,provide } from 'vue';
    import { useRouter } from 'vue-router';
    import { contractDetailsListAPI } from '@/api/contract';
    import ProgressBar from '@/components/ProgressBar.vue'
    import ProgressEvaluation from './components/ProgressEvaluation.vue'
    import { Toast } from 'vant';
    import {userStore} from '@/store/user'
    const store = userStore()
    const router = useRouter()
    const contractId = router.currentRoute.value.params.id
    const state = reactive({
        item: '',
        num: '',
        evaluationBoll: false,
        loading: false
    })
    const leftBack = () => history.back();
    const gotoProgress = () => {
        router.push('/contract/progress/'+ state.item.contract_id)
    }
    const getContractDetail = async () => {
        state.loading = true
        const res = await contractDetailsListAPI({
            id: contractId
        })
        if(res){
            state.item = res.records[0]
        }else{
            Toast(res.msg)
        }
        state.loading = false
    }
    const evaluation = (num) => {
        state.num = num
        state.evaluationBoll = true
    }
    const closeEvaluation = (bool) => {
        if(bool){
            getContractDetail()
        }
        state.evaluationBoll = false
    }
    getContractDetail()
    provide('popup',{
        closeEvaluation
    })
</script>
<template>
    <van-nav-bar title="合约进度" left-arrow @click-left="leftBack"/>
    <div v-if="state.item">
        <h3>{{state.item.contract_name}}</h3>
        <div class="progress-bar">
            <ProgressBar :item="state.item"></ProgressBar>
            <div class="progress-bar-text">
                <span>第一阶段</span>
                <span>第二阶段</span>
                <span>第三阶段</span>
                <span>第四阶段</span>
            </div>
        </div>
        <dl>
            <dt>
                <h4>第一阶段开发进度评估<span v-if="state.item.contract_I_state==-1 && store.role!=3">暂无评估</span>
                <span class="active" v-if="state.item.contract_I_state==-1 && store.role==3" @click="evaluation(1)">去评估</span></h4>
                <p v-if="state.item.contract_I_stage">{{state.item.contract_I_stage}}</p>
            </dt>
            <dt>
                <h4>第二阶段开发进度评估<span v-if="state.item.contract_II_state==-1 && store.role!=3">暂无评估</span>
                <span class="active" v-if="state.item.contract_II_state==-1 && store.role==3" @click="evaluation(2)">去评估</span></h4>
                <p v-if="state.item.contract_II_stage">{{state.item.contract_II_stage}}</p>
            </dt>
            <dt>
                <h4>第三阶段开发进度评估<span v-if="state.item.contract_III_state==-1 && store.role!=3">暂无评估</span>
                <span class="active" v-if="state.item.contract_III_state==-1 && store.role==3" @click="evaluation(3)">去评估</span></h4>
                <p v-if="state.item.contract_III_stage">{{state.item.contract_III_stage}}</p>
            </dt>
            <dt>
                <h4>第四阶段开发进度评估<span v-if="state.item.contract_IIII_state==-1 && store.role!=3">暂无评估</span>
                <span class="active" v-if="state.item.contract_IIII_state==-1 && store.role==3" @click="evaluation(4)">去评估</span></h4>
                <p v-if="state.item.contract_IIII_stage">{{state.item.contract_IIII_stage}}</p>
            </dt>   
        </dl>
    </div>
    <van-loading v-if="!state.item">加载中...</van-loading>
    <!--进度弹窗-->
    <van-popup v-model:show="state.evaluationBoll" position="top" duration="0" :style="{ width: '100%',height: '100%' }">
        <ProgressEvaluation :num="state.num" :id="contractId"></ProgressEvaluation>
    </van-popup>
</template>
<style scoped>
h3{
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 500;
    color: #333333;
    padding:1.2rem 0.69rem 1rem;
}
.progress-bar{
    margin: 0 0.64rem 1.17rem;
}
.progress-bar-text{
    display: flex;
}
.progress-bar-text span{
    flex: 1;
    text-align: right;
    margin: 0 1px;
    padding-top: 0.45rem;
}
dl{
    margin: 0 0.64rem;
}
dl dt{
    border: 1px solid #EDEDED;
    border-radius: 0.27rem;
    margin-bottom: 0.59rem;
    padding: 0.75rem 0.69rem;
}
dl dt h4{
    display: flex;
    font-size: 0.75rem;
    line-height: 0.75rem;
    font-weight: 300;
    color: #666666;
}
dl dt h4 span{
    flex: 1;
    text-align: right;
    font-size: 0.64rem;
    font-weight: 500;
    color: #ACACAC;
}
dl dt h4 span.active{
    color: #FF9415;
}
dl dt p{
    font-size: 0.64rem;
    font-weight: 400;
    color: #333333;
    line-height: 0.8rem;
    margin-top: 0.77rem;
}
</style>